<template>
  <div class="createPost-container">
    <el-form :model="form" :rules="rules" :disabled="is_update" label-width="150px" ref="couponForm">
      <div class="createPost-main-container">

        <el-form-item style="margin-bottom: 40px;" label-width="150px" label="优惠券名称:" prop="name">
          <el-input v-model="form.name" style="width:450px" placeholder="请输入名称" />
        </el-form-item>

        <el-form-item style="margin-bottom: 40px;" label-width="150px" label="使用门槛:" prop="price">
          <el-input v-model="form.price" style="width:320px" type="number" placeholder="请输入使用门槛" />
        </el-form-item>

        <el-form-item style="margin-bottom: 40px;" label-width="150px" label="每人限领:" prop="receive">
          <el-input v-model="form.receive" style="width:320px" type="number" placeholder="请输入每人限领券数 0不限制" />
        </el-form-item>

        <el-form-item label="优惠类型:" label-width="150px" prop="free_type">
          <el-select v-model="form.free_type" placeholder="请选择优惠类型" style="width:320px">
            <el-option label="满减" value="1"></el-option>
            <el-option label="满折" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-bottom: 40px;" label-width="150px" :label="form.free_type == 1 ? '优惠券金额':'优惠券折扣'" prop="coupon_price">
          <el-input v-model="form.coupon_price" type="number" min="1" max="12" style="width:320px"
            :placeholder="form.free_type == 1 ?'请输入优惠券金额':'请输入优惠券折扣'" />
        </el-form-item>
        <el-form-item style="margin-bottom: 40px;" label-width="150px" label="优惠券数量" prop="num">
          <el-input v-model="form.num" type="number" min="0" style="width:320px" placeholder="请输入优惠券数量" />
        </el-form-item>

        <el-form-item label="使用时间:" label-width="150px" prop="time_type">
          <el-radio label="0" v-model="form.time_type">
            <el-date-picker  :disabled="form.time_type==0?false:true" v-model="form.time1" type="datetimerange" value-format="timestamp"  range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-radio>
          <br />
          <el-radio label="1" v-model="form.time_type" style="margin-top:12px">领取后
            <el-input v-model="form.receive_after_day" :disabled="form.time_type==1?false:true" type="number" min="1" max="365" style="width:120px"
              placeholder="请输入天数" /> 天
          </el-radio>
        </el-form-item>

        <el-form-item label="领取时间:" label-width="150px" prop="time2">
          <el-date-picker v-model="form.time2" type="datetimerange" value-format="timestamp" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

        </el-form-item>

        <el-form-item label="适用范围:" label-width="150px" prop="goods_type">
          <el-select v-model="form.goods_type" placeholder="请选择适用范围">
            <el-option label="全平台" value="1"></el-option>
            <el-option label="指定分类" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.goods_type==3" label-width="150px" label="选择分类:" class="postInfo-container-item">
          <el-cascader :options="cateTree" v-model="form.cateTree" collapse-tags
            :props="{label:'name',value:'id',multiple: true}" clearable>
          </el-cascader>
        </el-form-item>

        <el-form-item style="margin-bottom: 40px;" label-width="150px" label="备注:" prop="goods_type">
          <el-input v-model="form.remarks" :rows="2" type="textarea" style="width:300px" class="article-textarea"
            autosize placeholder="请输入备注信息" />
        </el-form-item>

        <el-form-item>
          <el-button v-if="!is_update" type="primary" @click="onSubmit('couponForm')" size="small">保 存</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { selectTree} from '@/api/goods'
  import { createcoupon,detail} from '@/api/activity/coupon/coupon'
export default {
  data() {
    return {
      is_update:false,
      default_select:null,
      cateTree:[],
      form: {
        id:0,
        name:"",
        price:"",
        coupon_price:null,
        free_type:"1",
        goods_type:"1",
        time_type:"0",
        receive_after_day:0,
        remarks:null,
        num:null,
        time2:[],
        time1:[],
        cateTree:[],
      },
      rules:{
        name:[
          {required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        price:[{required: true, message: '使用门槛不能为空', trigger: 'blur' }],
        num:[{required: true, message: '优惠券数量不能为空', trigger: 'blur' }],
        coupon_price:[{required: true, message: '金额或者折扣不能为空', trigger: 'blur' }],
        time2:[{required: true, message: '领取时间不能为空', trigger: 'select' }],
      }
    }
  },
  beforeMount() {
    let id = this.$route.query.id || 0;
    if(id>0) this.init_coupon(id)

    selectTree().then(response=>{
      this.cateTree = response.data
    })
  },
  methods: {
    async init_coupon(id){
      this.is_update = true;
      await detail(id).then(response=>{
        this.form = response.data
        this.form.free_type = this.form.free_type+""
        this.form.goods_type = this.form.goods_type+""
        this.form.time_type = this.form.time_type+""

        this.form.time2 = [this.form.start_time*1000,this.form.end_time*1000]
        if(this.form.time_type == 0){
          this.form.time1 = [this.form.receive_start_time*1000,this.form.receive_end_time*1000]
        }

        if(this.form.goods_type == 3){
          this.form.cateTree = this.form.category_ids
        }
      })
    },
    onSubmit:function(formName){
       this.$refs[formName].validate((valid)=>{
          if (valid) {
            if(!this.checkSub()){
              return false;
            }
            
            if(this.is_update){
              updateCoupon(this.form).then(response => {
                if(response.code == 200){
                  this.$message({
                    message: '更新成功',
                    type: 'success'
                  })
                  setTimeout(()=>{
                    this.$router.push({name:'coupon'});
                  }, 200)
                }
              })
            }else{
              createcoupon(this.form).then(response => {
                if(response.code == 200){
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  setTimeout(()=>{
                    this.$router.push({name:'coupon'});
                  }, 200)
                }
              })
            }
          }
       })
    },
    checkSub(){
      // 提交前的数据检测
      if(this.form.time_type == 0){
        if(!this.form.time1){
          return this.showTipsError('请选择使用日期');
        }else{
          this.form.receive_after_day=0
        }
      }else{
        if(this.form.receive_after_day < 1){
          return this.showTipsError('请填写领取有效期');
        }else{
          this.form.time1 = null;
        }
      }

      if(this.form.goods_type == 3 && !this.form.cateTree){
        return this.showTipsError('请选择指定分类');
      }
 
      return true;
    },
    showTipsError(message){
      this.$message({
        message: message,
        type: 'warning'
      })

      return false;
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.line {
  text-align: center;
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.createPost-container {
  background: #fff;
  margin-top: 18px;
  height: 100%;
  min-height: calc(100vh - 68px);
  font-size: 12px
}

.createPost-container * {
  font-size: 12px;
}
</style>
